<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>index</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.contene{
		width: 500px;
		height: 600px;
		margin: 0 auto;
		background-color: green;
	}
	.iframe{
		width: 100%;
		height: 100%;
	}
	.fl{
		display: inline-block;
		float: left;
		width: 150px;
	}
	.btnGroup{
		width: 500px;
		float: left;
		clear: left;
	}
	.btnGroup button{
		width: 100px;
	}
</style>
</head>
<body>
	<div class="contene">
		<div class="fl" id="f1"><p id="fp">123</p><iframe src="pageA.html" frameborder=0 class="iframe" id="iframe"></iframe></div>
		<div class="fl" id="f2"><iframe src="pageA.html" frameborder=0 class="iframe"></iframe></div>
		<div class="btnGroup">
			<button onclick="changeNum()">changeNum</button>
			<button onclick="changeFrame()">changeFrame</button>
			<button id="dn" onclick="dn()">diplay:none</button>
			<button id="db" onclick="db()">diplay:block</button>
			<button id="vn" onclick="vn()">visility:hidden</button>
			<button id="vb" onclick="vb()">visility:visible</button>
		</div>
		
	</div>
</body>
</html>
<script>
	function dn(){
		var f1 = document.getElementById('f1');
		f1.style.display = 'none';
	}
	function db(){
		var f1 = document.getElementById('f1');
		f1.style.display = 'block';
	}
	function changeNum(){
		document.getElementById('fp').innerHTML = "456";
	}
	function changeFrame(){
		document.getElementById('iframe').src = "PageB.html";
	}
	function vn(){
		document.getElementById('f1').style.visibility = 'hidden';
	}
	function vb(){
		document.getElementById('f1').style.visibility = 'visible';
	}
</script>